<script setup lang="ts">
import Nifi from "../../nifi";
import { computed } from "vue"

//
const { main } = defineProps<{ main: Nifi }>();
//
const rootID = computed(() => {
    const name = main.group.breadcrumb[main.group.id]?.name;
    if(name){
        main.menu.resetName(name);
    }
    if (main.group.breadcrumbIds.includes(main.rootId)) {
        return '';
    }
    return main.rootId
});

const breads = computed(() => [...main.group.breadcrumbIds].reverse())


const handleGoTo = (id: string) => {
    if(id != main.group.id){
        main.group.refresh(id)
    }
}

</script>

<template>
    <div class="flex items-center">
        <div class="root-item" v-if="rootID" @click="handleGoTo(rootID)"><span class="p-2px">{{ main.group.breadcrumb[rootID]?.name }}</span></div>
        <template v-for="id in breads">
            <div :class="['group-item',{'is-current':id == main.group.id}]" @click="handleGoTo(id)"><span>{{ main.group.breadcrumb[id]?.name }}</span></div>
        </template>
    </div>
</template>

<style scoped>
.root-item{
    &::after {
        content:":";
        margin:0 4px;
    }
}

.group-item {
    color:#666;
    &.is-current{
        font-weight: bold;
        color:#333;
        >span {
            cursor:default;
        }
    }


    &+.group-item{
        &::before {
            content:">";
            padding:0 8px;
            color:#bbb;
            
        }
    }
}

.root-item,.group-item{
    >span {
        cursor: pointer;
        &:hover{
            color:#333; 
        }
    }
}
</style>